<!--
 * @Author: linzq
 * @Date: 2021-08-04 16:24:11
 * @LastEditors: linzq
 * @LastEditTime: 2021-08-18 16:01:35
 * @Description: 项目svg展示
-->
<template>
  <div class="icons-container">
    <el-tabs type="border-card">
      <el-tab-pane label="项目svg图标">
        <div class="grid">
          <div v-for="(item, index) in svgList" :key="index" @click="handleClipboard(generateIconCode(item),$event)">
            <el-tooltip placement="top">
              <div slot="content">
                {{ generateIconCode(item) }}
              </div>
              <div class="icon-item">
                <svg-icon :icon-class=item className='svg-class' />
                <span>{{item}}</span>
              </div>
            </el-tooltip>

          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import clipboard from '@/utils/clipboard'

export default {
  name: 'IconList',
  data() {
    return {}
  },
  // 监听属性 类似于data概念
  computed: {
    svgList: () => {
      const list = []
      require
        .context('@/assets/icons/svg', false, /.svg$/)
        .keys()
        .map(item => {
          list.push(item.slice(item.lastIndexOf('/') + 1, item.lastIndexOf('.')))
        })
      return list
    }
  },
  watch: {},
  created() {},
  mounted() {},
  // 方法集合
  methods: {
    generateIconCode(symbol) {
      return `<svg-icon icon-class="${symbol}" />`
    },
    generateElementIconCode(symbol) {
      return `<i class="el-icon-${symbol}" />`
    },
    handleClipboard(text, event) {
      clipboard(text, event)
    }
  }
}
</script>
<style lang='less' scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    align-content: flex-start;
    background: #ddd;
    height: 100%;

    .icon-item {
      margin: 12px;
      height: 85px;
      text-align: center;
      width: 100px;
      float: left;
      color: #24292e;
      cursor: pointer;
    }
    span {
      display: block;
      font-size: 16px;
      margin-top: 10px;
    }
    .svg-class {
      width: 32px;
      height: 32px;
      pointer-events: none;
    }
  }
}
</style>